﻿$(function () {
    var selectedChannel;
    var selectedChannelId;
    var channels;
    var loaded = false;
    var showMessagesSucces = true;
    var selected;

    $('body').ready(
		function showChannels() {
		    var showChannelsUrl = "http://localhost:8341/TwitterService.svc/Chanels/all"
		    $.ajax({
		        type: "GET",
		        async: true,
		        url: showChannelsUrl,
		        data: null,
		        contentType: "application/json; charset=utf-8",
		        success: function (result) {
		            channels = result;
		            selectedChannel = result[0].ChanelName.trim();
		            selectedChannelId = result[0].ChanelId;
		            $('#channelHeader').append('<h3> Channel #' + selectedChannel + '</h3>');
		            $('#channels').append('<div class="clicked" >#' + result[0].ChanelName.trim() + '</div>')
		            selected = $('.clicked');
		            for (var i = 1; i < result.length; i++) {
		                $('#channels').append('<div class="channel" >#' + result[i].ChanelName.trim() + '</div>')
		            }
		            loaded = true;
		        }
		    });
		});

    function PostMessage() {
        var postMessagesUrl = "http://localhost:8341/TwitterService.svc/PostMessage";
        var message = { Message: $('#textBox').val(), ChannelId: selectedChannelId, TimeStamp: "2011/11/11" };
        $.ajax({
            type: "POST",
            async: true,
            url: postMessagesUrl,
            data: JSON.stringify(message),
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                $('#textBox').val("");
                $('#textBox').focus();
            }
        });
    }

    $('#textBox').bind('keydown', function (e) {
        if (e.which === 13) {
            postMessage();
            return false;
        }

    });
    $('#submit').click(PostMessage);

    $('.channel').live("click",
            function SelectChannel() {
                var selectedChannel = $(this).text().substring(1);
                selected.removeClass('clicked');
                selected.addClass('channel');
                selected = $(this);
                $(this).addClass('clicked');
                getIdOfCurrentChannel(selectedChannel);
                $('#channelHeader').text("");
                $('#channelHeader').append('<h3> Channel #' + selectedChannel + '</h3>');
            }
        );

    function getIdOfCurrentChannel(targetChannel) {
        for (var i = 0; i < channels.length; i++) {
            if (channels[i].ChanelName.trim() === targetChannel) {
                selectedChannelId = channels[i].ChanelId;
                break;
            }
        }
    }

    $('#reset').click(
            function resetChannel() {
                var resetChannelURL = "http://localhost:8341/TwitterService.svc/ResetChanel";

                var channel = { ChanelName: selectedChannel, ChanelId: selectedChannelId };
                $.ajax({
                    type: "POST",
                    async: true,
                    url: resetChannelURL,
                    data: JSON.stringify(channel),
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        $('#textBox').val("")
                    }
                });
            });

    setInterval(function showMessages() {
        if (loaded === true && showMessagesSucces == true) {
            var showMessagesURL = "http://localhost:8341/TwitterService.svc/ShowMessages";
            var channelAndNumber = { ChannelId: selectedChannelId, NumberOfMessagesToBeShown: 20 };
            showMessagesSucces = false;

            $.ajax({
                type: "POST",
                async: true,
                url: showMessagesURL,
                data: JSON.stringify(channelAndNumber),
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    $('.message').remove();
                    for (var i = 0; i < result.length; i++) {
                        var date = '[' + result[i].TimeStamp + '] ';
                        $('#contentBody').append('<p class="message">' + date + result[i].Message + '</p>');
                    }
                    showMessagesSucces = true;
                }

            });
        }
    }, 500);
});